<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>《JavaScript语言精粹 修订版》 读书笔记 | 若川的博客</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/favicon.ico">
    <link rel="mainfest" href="/mainfest.json">
    <meta name="description" content="若川，微信搜索「若川视野」关注我，长期交流学习。写有《学习源码整体架构系列》。包含jquery源码、underscore源码、lodash源码、sentry源码、vuex源码、axios源码、koa源码、redux源码。前端路上，PPT爱好者，所知甚少，唯善学。">
    
    <link rel="preload" href="/assets/css/0.styles.0ad39d54.css" as="style"><link rel="preload" href="/assets/js/app.9fbcafa6.js" as="script"><link rel="preload" href="/assets/js/2.33539d56.js" as="script"><link rel="preload" href="/assets/js/35.35a86a7c.js" as="script"><link rel="preload" href="/assets/js/23.72249401.js" as="script"><link rel="prefetch" href="/assets/js/10.17a947d6.js"><link rel="prefetch" href="/assets/js/11.599e7eee.js"><link rel="prefetch" href="/assets/js/12.574e6f26.js"><link rel="prefetch" href="/assets/js/13.3a93edbc.js"><link rel="prefetch" href="/assets/js/14.c9f20b6b.js"><link rel="prefetch" href="/assets/js/15.c6b03e37.js"><link rel="prefetch" href="/assets/js/16.c445ccb9.js"><link rel="prefetch" href="/assets/js/17.60b94fab.js"><link rel="prefetch" href="/assets/js/18.86de3f95.js"><link rel="prefetch" href="/assets/js/19.6fedd448.js"><link rel="prefetch" href="/assets/js/20.5b11fd5b.js"><link rel="prefetch" href="/assets/js/21.e5faf0b7.js"><link rel="prefetch" href="/assets/js/22.23137eae.js"><link rel="prefetch" href="/assets/js/24.20d474b3.js"><link rel="prefetch" href="/assets/js/25.6dc03c07.js"><link rel="prefetch" href="/assets/js/26.fcf5232b.js"><link rel="prefetch" href="/assets/js/27.6ee352c4.js"><link rel="prefetch" href="/assets/js/28.7534ba1e.js"><link rel="prefetch" href="/assets/js/29.352ed61c.js"><link rel="prefetch" href="/assets/js/3.2f315ac7.js"><link rel="prefetch" href="/assets/js/30.e5dbb079.js"><link rel="prefetch" href="/assets/js/31.b8562982.js"><link rel="prefetch" href="/assets/js/32.f3c8f832.js"><link rel="prefetch" href="/assets/js/33.5ca5188e.js"><link rel="prefetch" href="/assets/js/34.624e3116.js"><link rel="prefetch" href="/assets/js/36.21f88fe5.js"><link rel="prefetch" href="/assets/js/37.f5b01c2c.js"><link rel="prefetch" href="/assets/js/38.79ed2093.js"><link rel="prefetch" href="/assets/js/39.687f8425.js"><link rel="prefetch" href="/assets/js/4.9af06e45.js"><link rel="prefetch" href="/assets/js/40.deaa2213.js"><link rel="prefetch" href="/assets/js/41.ede9f8e5.js"><link rel="prefetch" href="/assets/js/42.c48ff846.js"><link rel="prefetch" href="/assets/js/43.012e8b81.js"><link rel="prefetch" href="/assets/js/44.d7040c40.js"><link rel="prefetch" href="/assets/js/45.2805a83b.js"><link rel="prefetch" href="/assets/js/46.95a37284.js"><link rel="prefetch" href="/assets/js/47.d1c213db.js"><link rel="prefetch" href="/assets/js/48.00be6d02.js"><link rel="prefetch" href="/assets/js/49.3d722bd1.js"><link rel="prefetch" href="/assets/js/5.aace9ee0.js"><link rel="prefetch" href="/assets/js/50.d9fa2cde.js"><link rel="prefetch" href="/assets/js/51.e0aaa97a.js"><link rel="prefetch" href="/assets/js/52.a700a7a9.js"><link rel="prefetch" href="/assets/js/53.dbb93ca1.js"><link rel="prefetch" href="/assets/js/6.e0576ee1.js"><link rel="prefetch" href="/assets/js/7.4a4a967d.js"><link rel="prefetch" href="/assets/js/8.b7698a4a.js"><link rel="prefetch" href="/assets/js/9.6930a420.js">
    <link rel="stylesheet" href="/assets/css/0.styles.0ad39d54.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">若川的博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="https://image-static.segmentfault.com/355/182/3551821948-5df888aa1dc88_articlex" target="_blank" rel="noopener noreferrer" class="nav-link external">
  公众号：若川视野
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/" class="nav-link">
  目录
</a></div><div class="nav-item"><a href="/about/" class="nav-link">
  关于我
</a></div><div class="nav-item"><a href="/poetry/2012-2016/" class="nav-link">
  曾经写的&quot;诗词&quot;
</a></div><div class="nav-item"><a href="https://github.com/lxchuan12/blog" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://juejin.im/user/1415826704971918/posts" target="_blank" rel="noopener noreferrer" class="nav-link external">
  掘金
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://www.zhihu.com/people/lxchuan12/activities" target="_blank" rel="noopener noreferrer" class="nav-link external">
  知乎
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://www.yuque.com/lxchuan12/blog" target="_blank" rel="noopener noreferrer" class="nav-link external">
  语雀
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其他" class="dropdown-title"><span class="title">其他</span> <span class="arrow down"></span></button> <button type="button" aria-label="其他" class="mobile-dropdown-title"><span class="title">其他</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://segmentfault.com/u/lxchuan12/articles" target="_blank" rel="noopener noreferrer" class="nav-link external">
  segmentFault
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="http://weibo.com/lxchuan12" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微博
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="http://www.jianshu.com/users/83129d433d72/latest_articles" target="_blank" rel="noopener noreferrer" class="nav-link external">
  简书
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="友链" class="dropdown-title"><span class="title">友链</span> <span class="arrow down"></span></button> <button type="button" aria-label="友链" class="mobile-dropdown-title"><span class="title">友链</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://shanyue.tech" target="_blank" rel="noopener noreferrer" class="nav-link external">
  山月
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="http://lucifer.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
  lucifer
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://hungryturbo.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  童欧巴
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.scarsu.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  scarsu
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://mtc.nofwl.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  lencx的博客
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://coder.itclan.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  itclanCoder
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ruizhengyun.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
  编程之上
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="https://image-static.segmentfault.com/355/182/3551821948-5df888aa1dc88_articlex" target="_blank" rel="noopener noreferrer" class="nav-link external">
  公众号：若川视野
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/" class="nav-link">
  目录
</a></div><div class="nav-item"><a href="/about/" class="nav-link">
  关于我
</a></div><div class="nav-item"><a href="/poetry/2012-2016/" class="nav-link">
  曾经写的&quot;诗词&quot;
</a></div><div class="nav-item"><a href="https://github.com/lxchuan12/blog" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://juejin.im/user/1415826704971918/posts" target="_blank" rel="noopener noreferrer" class="nav-link external">
  掘金
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://www.zhihu.com/people/lxchuan12/activities" target="_blank" rel="noopener noreferrer" class="nav-link external">
  知乎
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://www.yuque.com/lxchuan12/blog" target="_blank" rel="noopener noreferrer" class="nav-link external">
  语雀
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其他" class="dropdown-title"><span class="title">其他</span> <span class="arrow down"></span></button> <button type="button" aria-label="其他" class="mobile-dropdown-title"><span class="title">其他</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://segmentfault.com/u/lxchuan12/articles" target="_blank" rel="noopener noreferrer" class="nav-link external">
  segmentFault
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="http://weibo.com/lxchuan12" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微博
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="http://www.jianshu.com/users/83129d433d72/latest_articles" target="_blank" rel="noopener noreferrer" class="nav-link external">
  简书
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="友链" class="dropdown-title"><span class="title">友链</span> <span class="arrow down"></span></button> <button type="button" aria-label="友链" class="mobile-dropdown-title"><span class="title">友链</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://shanyue.tech" target="_blank" rel="noopener noreferrer" class="nav-link external">
  山月
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="http://lucifer.ren" target="_blank" rel="noopener noreferrer" class="nav-link external">
  lucifer
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://hungryturbo.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  童欧巴
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.scarsu.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  scarsu
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://mtc.nofwl.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  lencx的博客
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://coder.itclan.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  itclanCoder
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ruizhengyun.cn" target="_blank" rel="noopener noreferrer" class="nav-link external">
  编程之上
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/" aria-current="page" class="sidebar-link">目录</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>学习源码系列</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>面试官问系列</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>历史文章</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/puppeteer-create-pdf-and-merge/" class="sidebar-link">前端使用puppeteer 爬虫生成《React.js 小书》PDF并合并</a></li><li><a href="/vue-cli-2-webpack/" class="sidebar-link">分析vue-cli@2.9.3 搭建的webpack项目工程</a></li><li><a href="/oh-my-zsh/" class="sidebar-link">使用 ohmyzsh 打造 windows、ubuntu、mac 系统高效终端命令行工具</a></li><li><a href="/20180421-youzan-front-end-tech-open-day/" class="sidebar-link">参加有赞前端技术开放日所感所想</a></li><li><a href="/vue-2-qrcode/" class="sidebar-link">vue 2.x项目 vue-qriously 生成二维码并下载、cliploard复制粘贴</a></li><li><a href="/js-object-api/" class="sidebar-link">JavaScript 对象所有API解析【2020版】</a></li><li><a href="/js-book/" aria-current="page" class="active sidebar-link">《JavaScript语言精粹 修订版》 读书笔记</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/js-book/#第1章-精华" class="sidebar-link">第1章 精华</a></li><li class="sidebar-sub-header"><a href="/js-book/#第2章-语法" class="sidebar-link">第2章 语法</a></li><li class="sidebar-sub-header"><a href="/js-book/#第3章-对象" class="sidebar-link">第3章 对象</a></li><li class="sidebar-sub-header"><a href="/js-book/#第4章-函数" class="sidebar-link">第4章 函数</a></li><li class="sidebar-sub-header"><a href="/js-book/#第5章-继承" class="sidebar-link">第5章 继承</a></li><li class="sidebar-sub-header"><a href="/js-book/#第6章-数组" class="sidebar-link">第6章 数组</a></li><li class="sidebar-sub-header"><a href="/js-book/#第7章-正则表达式" class="sidebar-link">第7章 正则表达式</a></li><li class="sidebar-sub-header"><a href="/js-book/#第8章-方法" class="sidebar-link">第8章 方法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/js-book/#array" class="sidebar-link">Array</a></li><li class="sidebar-sub-header"><a href="/js-book/#function" class="sidebar-link">Function</a></li><li class="sidebar-sub-header"><a href="/js-book/#number" class="sidebar-link">Number</a></li><li class="sidebar-sub-header"><a href="/js-book/#object" class="sidebar-link">Object</a></li><li class="sidebar-sub-header"><a href="/js-book/#regexp" class="sidebar-link">RegExp</a></li><li class="sidebar-sub-header"><a href="/js-book/#string" class="sidebar-link">String</a></li></ul></li><li class="sidebar-sub-header"><a href="/js-book/#第9章-代码风格" class="sidebar-link">第9章 代码风格</a></li><li class="sidebar-sub-header"><a href="/js-book/#第10章-优美的特性" class="sidebar-link">第10章 优美的特性</a></li><li class="sidebar-sub-header"><a href="/js-book/#关于" class="sidebar-link">关于</a></li><li class="sidebar-sub-header"><a href="/js-book/#微信公众号-若川视野" class="sidebar-link">微信公众号  若川视野</a></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>杂文</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>曾经写的&quot;诗词&quot;</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>年度总结</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>关于</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="《javascript语言精粹-修订版》-读书笔记"><a href="#《javascript语言精粹-修订版》-读书笔记" class="header-anchor">#</a> 《JavaScript语言精粹 修订版》 读书笔记</h1> <blockquote><p><code>写于2017年07月23日</code></p></blockquote> <blockquote><p>你好，我是<a href="https://lxchuan12.gitee.io" target="_blank" rel="noopener noreferrer">若川<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，微信搜索<a href="https://mp.weixin.qq.com/s/c3hFML3XN9KCUetDOZd-DQ" target="_blank" rel="noopener noreferrer">「若川视野」<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>关注我，专注前端技术分享。欢迎加我微信<code>ruochuan12</code>，加群交流学习。</p></blockquote> <blockquote><p>之前看到这篇文章，<a href="https://zhuanlan.zhihu.com/p/23265155?refer=dreawer" target="_blank" rel="noopener noreferrer">前端网老姚浅谈：怎么学JavaScript？<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，说到怎么学习JavaScript，那就是<strong>看书、分析源码。</strong> <strong>10本书读2遍的好处，应该大于一本书读20遍。</strong> <strong>看书主动学习，看视频是被动学习。</strong> <strong>看书和分析源码的时机</strong>。但已经工作一年半载时，正是提高的好时候，此时可以去看书了。全面系统的梳理知识点，扫清自己的盲区。如果只是靠项目经验是不够的，通过项目来学习，那&gt;肯定是必须的，工作本身就是一个学习的过程。
**怎么把一本书看完呢？**很简单，敲。文字加代码都敲。
比较认同老姚的说法。去年毕业到现在，我也算是工作一年了，是时候看书查缺补漏了。</p></blockquote> <p>于是我就先把这本薄的经典书《JavaScript语言精粹 修订版》<a href="https://book.douban.com/subject/11874748/" target="_blank" rel="noopener noreferrer">豆瓣读书本书简介<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（总共10章，除去附录，才100页），读完并记录了一些笔记。基本算是摘抄书本的，自己联想到了一些知识和资料也扩展了一下。总体写下来近一万字。读书笔记还可以分享给别人看。回顾时，书不在身边还可以看看自己的笔记。想想这类经典书记一遍动手敲一遍也是很值得的。不过这读书笔记中可能会有一些错别字，阅读时如果发现欢迎指正。</p> <h2 id="第1章-精华"><a href="#第1章-精华" class="header-anchor">#</a> 第1章 精华</h2> <p>大多数语言都有精华和糟粕。<code>JavaScript</code>令人诡异的事情是，在对这门语言没有的太多了解，甚至对编程都没有太多了解的情况下，你也能用它来完成工作。
看到这里不禁想起：</p> <blockquote><p>张鑫旭大牛在<a href="http://www.zhangxinxu.com/wordpress/2017/06/ten-question-about-frontend-zhihu/" target="_blank" rel="noopener noreferrer">《我对知乎前端相关问题的十问十答》<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
非计算机专业背景学习JS要点有这一条：
所有继承和原型相关内容跳过，注意，是跳过，不要看！没有这些JS一样可以活得很好，你的日常工作一样玩得飞起，当然，你没忍住看了相关知识也没关系，因为你会发现自己看不懂的；</p></blockquote> <p><code>JavaScript</code>的函数是（主要）基于<strong>词法作用域</strong>的顶级对象。</p> <blockquote><p>译注：<code>JavaScript</code>中的函数是根据词法来划分作用域的，而不是动态划分作用域的。具体内容参见《<code>JavaScript</code>权威指南》中译第5版相关章节“8.8.1 词法作用域”。
JavaScript有非常强大的对象字面量表示法。这种表示法是JSON的灵感来源。
原型继承是JavaScript中一个有争议的特性。</p></blockquote> <p>《<code>ECMAScript</code>编程语言》第3版定义了<code>JavaScript</code>的标准。
<a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf" target="_blank" rel="noopener noreferrer">ES3标准<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> <strong>扩展：</strong><a href="http://yanhaijing.com/es5/ECMAScript%E8%A7%84%E8%8C%83-%E7%AC%AC%E4%B8%89%E7%89%88_%E4%B8%AD%E6%96%87%E7%89%88.pdf" target="_blank" rel="noopener noreferrer">颜海镜大牛整理的ES3中文版<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> <a href="http://yanhaijing.com/es5/#about" target="_blank" rel="noopener noreferrer">颜海镜大牛整理的ES5中文版<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> <a href="https://www.w3.org/html/ig/zh/wiki/ES5#.E7.A8.8B.E5.BA.8F" target="_blank" rel="noopener noreferrer">W3c ES5中文版<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> <a href="http://es6.ruanyifeng.com/" target="_blank" rel="noopener noreferrer">阮一峰大牛的书籍《ES6标准入门2》<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
更多内容可参见这篇文章：<a href="https://zhuanlan.zhihu.com/p/27537439" target="_blank" rel="noopener noreferrer">ECMAScript 2018 标准导读<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>一个简单的例子：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token class-name">Function</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">method</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> func</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>prototype<span class="token punctuation">[</span>name<span class="token punctuation">]</span> <span class="token operator">=</span> func<span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>书中贯彻始终都会用到这个<code>method</code>方案，作者将会在第4章解释它。</p> <h2 id="第2章-语法"><a href="#第2章-语法" class="header-anchor">#</a> 第2章 语法</h2> <p>本章主要用铁路图（语法图）表示语法。
主要有：空白、标识符、数字、字符串、语句、表达式、字面量、函数。
<code>typeof</code> 运算符产生的值有<code>'number'</code>, <code>'string'</code>,<code>'boolean'</code>,<code>'undefined'</code>,<code>'function'</code>,<code>'object'</code>。如果运算数是一个数组或者是<code>null</code>,那么结果是<code>'object'</code>,这其实是不对的。</p> <h2 id="第3章-对象"><a href="#第3章-对象" class="header-anchor">#</a> 第3章 对象</h2> <p><code>JavaScript</code>简单数据类型包括数字、字符串、布尔值，<code>null</code>值和<code>undefined</code>值。其他所有值都是对象。
数组、字符串和布尔值“貌似”对象，因为它们拥有方法（包装对象），但它们是不可变的。
对象是属性的容器，其中每个属性都拥有名字和值。属性名可以是包括空字符串在内的所有字符串，属性值可以是除了<code>undefined</code>值之外的任何值。</p> <p><code>JavaScript</code>包含一种原型链的特性，允许对象继承到另一个对象的属性。正确地使用它能减少对象初始化时的消耗的时间和内存。
<strong>检索</strong> <code>.</code>,<code>[]</code>两种检索方式，推荐点<code>.</code>表示法。
尝试重<code>undefined</code>的成员属性中取值将会导致<code>TypeError</code>异常，这时可以通过<code>&amp;&amp;</code>来避免错误。
<strong>更新</strong>
如果属性名已经存在对象里。那么属性的值会被替换。如果之前没有拥有那个属性名，那么该属性将被扩充到对象中。
<strong>引用</strong>
对象通过引用来传递。它们永远不会被复制。
<strong>原型</strong>
所有通过对象字面量创建的对象都链接到<code>Object.prototype</code>。
创建新对象时，可以选择某个对象作为它的原型。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> Object<span class="token punctuation">.</span>create <span class="token operator">!==</span> <span class="token string">'function'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  Object<span class="token punctuation">.</span><span class="token function-variable function">create</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">o</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> <span class="token function-variable function">F</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token class-name">F</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span> o<span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">F</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>原型连接只有在检索值的时候才被用到。如果尝试去获取对象的某个属性值，但对象没有此属性名，那么<code>JavaScript</code>会试着从原型对象中获取属性值。如果那个原型对象也没有该属性，那么再从它的原型中寻找，依此类推，直到该过程最后达到终点<code>Object.prototype</code>。如果想要的属性完全不存在原型链中，那么结果就是 <code>undefined</code>值。这个过程称为<strong>委托</strong>。
原型关系是一种动态的关系。
<strong>反射</strong>
原型链上的所有属性都会产生值。有两种方案可以处理掉对象上不需要的属性。
①程序检查时丢弃值为函数的属性。但有可能有些值确实是函数，所以该方法不可靠。
②使用<code>hasOwnProperty</code>方法，如果是对象拥有独有的属性，则返回<code>true</code>。该方法不会检查原型链。
<strong>枚举</strong>
① <code>for in</code>可以遍历一个对象中所有的属性名。但包含函数和一些不关心的原型中属性。而且顺序不确定，可以用 <code>hasOwnProperty</code>方法和<code>typeof</code>排除函数。
②<code>for</code> 循环不会出现<code>for in</code>那些情况。
<strong>删除</strong>
delete运算符可以用来删除对象的属性。
<strong>减少全局变量的污染</strong>
可以把全局性的资源纳入一个名称空间之下。这样做能减少冲突。</p> <h2 id="第4章-函数"><a href="#第4章-函数" class="header-anchor">#</a> 第4章 函数</h2> <p>函数用于①代码复用②信息隐藏③组合调用。一般来说，所谓编程，就是将一组需求分节成一组函数与数据结构的技能。
<code>JavaScript</code>的函数就是对象。
函数对象连接到<code>Function.prototype</code>(该原型对象本身连接到<code>Object.prototype</code>)。
每个函数在创建时会附加两个隐藏属性，函数的上下文和实现函数行为的代码。
每个函数对象在创建时也随配有一个<code>prototype</code>属性。它的值是一个拥有<code>constructor</code>属性且值为该函数的对象。
<strong>函数字面量</strong>
函数字面量包括4个部分。①保留字<code>function</code>②函数名，可以省略，③一组参数④一组语句。
函数字面量可以出现在任何允许表达式出现的地方。一个内部函数除了可以访问自己的参数和变量，同时也可以自由访问把它嵌套在其中的父函数的参数和变量。通过函数字面量创建的函数对象包含一个连接到外部上下文的连接。这被称为<strong>闭包</strong>。
<strong>调用</strong>
除了声明时定义的形式参数，每一个函数还接收两个附加的参数：<code>this</code>和<code>argument</code>。在<code>JavaScript</code>中一共有四种调用模式。①方法调用模式，②函数调用模式③构造器调用模式④<code>apply</code>调用模式。</p> <p>（<code>this</code>指向问题一直困扰很多人。我一般是这样记的，谁调用<code>this</code>就指向谁。）</p> <p><strong>方法调用模式</strong>
对象的方法执行,<code>this</code>指向该对象。比如：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> myObj <span class="token operator">=</span> <span class="token punctuation">{</span>
  value<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
  <span class="token function-variable function">showValue</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'value:'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
myObj<span class="token punctuation">.</span><span class="token function">showValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// value: 0</span>
</code></pre></div><p><strong>函数调用模式</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">add</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span>b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//7</span>
window<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//7</span>
<span class="token comment">// 这种this被绑定到全局对象（window）。</span>
<span class="token comment">// 可以理解是window.add(3,4);</span>
</code></pre></div><p>有种简单的办法就是<code>var that = this;</code>把<code>this</code>存储下。
例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> myObj <span class="token operator">=</span> <span class="token punctuation">{</span>
  value<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
  age<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
  <span class="token function-variable function">showValue</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'value:'</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span>  that <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> <span class="token function-variable function">showAge</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// window上没有age，所以是undefined</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'这里的this是window ---age:'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// undefined</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'age:'</span><span class="token punctuation">,</span> that<span class="token punctuation">.</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// 20</span>
     <span class="token punctuation">}</span>
     <span class="token function">showAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
myObj<span class="token punctuation">.</span><span class="token function">showValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// 0， undefined，</span>
</code></pre></div><p><strong>构造器调用模式</strong> <code>JavaScript</code>是一门基于原型继承的语言。
如果在一个函数前面带上<code>new</code> 来调用。那么背地利将会创建一个连接到该函数的<code>prototype</code>成员的新对象，同时this会被绑定到那个新对象上。
<code>new</code> 前缀也会改变<code>return</code> 语句的行为。
例：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">Quo</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>status <span class="token operator">=</span> string<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token class-name">Quo</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">get_status</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>status<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> myQuo <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Quo</span><span class="token punctuation">(</span><span class="token string">'confused'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'confused'</span>
</code></pre></div><p>一个函数，如果创建的目的就是希望结合<code>new</code> 前缀来调用。那么它就被称为构造器函数。按照约定，它们保存在以大写函数命名的变量里。如果调用构造器函数时没有在前面加上<code>new</code>,可能会发生非常糟糕的事情，既没有编译时的警告，也没有运行时广告，所以大写约定非常重要。
作者不推荐这种形式的构造器函数。有更好的替代方式。
<strong>Apply调用模式</strong> <code>JavaScript</code>是一门函数式的面向对象编程语言，所以对象可以拥有方法。
<code>apply</code>方法让我们构建一个参数数组传递给调用函数，它也允许我们选择<code>this</code>的值。
<strong>参数</strong> <code>arguments</code>，虽然拥有<code>length</code>属性，但不是真正的数组。而是类似数组（<code>array-like</code>）的对象。
<strong>返回</strong> <code>return</code> 可用来是函数提前返回。当<code>return</code> 被执行时，函数立即返回而不再执行余下的语句。
一个函数总会返回一个值，如果没指定，那就是返回<code>undefined</code>值。
如果函数调用时在前面加上了<code>new</code> 前缀，且返回值不是一个对象，则返回<code>this</code>（该新对象）。
<strong>异常</strong> <code>JavaScript</code>提供了一套异常处理机制。
<code>throw</code>语句和<code>try catch</code>,<code>try catch</code>中<code>finally</code>是可选的。
<strong>扩展类型的功能</strong> <code>JavaScript</code>允许给语言的基本类型扩充功能。在第3章中我们已经看到，可以通过<code>Object.prototype</code>添加方法，可以让该方法对所有对象都可用。这样的方式对函数、数组、字符串、数字、正则表达式和布尔值同样适用。</p> <p>例如：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token class-name">Function</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">method</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>prototype<span class="token punctuation">[</span>name<span class="token punctuation">]</span>  <span class="token operator">=</span> func<span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>基本类型的原型是公用结构，所以在类库混用时务必小心。一个保险的做法就是只在确认没有该方法时才添加它。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token class-name">Function</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">methods</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> func</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>prototype<span class="token punctuation">[</span>name<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>prototype<span class="token punctuation">[</span>name<span class="token punctuation">]</span> <span class="token operator">=</span> func<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>递归</strong>
递归函数就是会直接或间接地调用自身的一种函数。递归是一种强大的编程技术，递归是用一般的方式去解决每一个子问题。书中举了一个<strong>汉诺塔</strong>的例子，是程序设计中经典递归问题。详细说明可以参见 <a href="http://baike.baidu.com/view/191666.htm" target="_blank" rel="noopener noreferrer">百度百科“汉诺塔”词条<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。
一些语言提供了尾递归优化。尾递归是一种在函数的最后执行调用语句的特殊形式的递归。参见<a href="https://en.wikipedia.org/wiki/Tail_call" target="_blank" rel="noopener noreferrer">Tail call<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。 ES6版本扩展了尾递归。参见阮一峰老师的《ES6标准入门》中的<a href="http://es6.ruanyifeng.com/#docs/function#%E5%B0%BE%E8%B0%83%E7%94%A8%E4%BC%98%E5%8C%96" target="_blank" rel="noopener noreferrer">尾调用优化<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> <strong>作用域</strong>
在编程语言中，作用域控制着变量与参数的可见性和声明周期。
书中指出当前<code>JavaScript</code>没有块级作用域。因为没有块级作用域，所以最好的做法是在函数体的顶部声明函数中可能用到的所有变量。不过<code>ES6</code>扩展了有块级作用域。
<strong>闭包</strong>
作用域的好处是内部函数可以访问定义它们的外部函数的参数和变量（除了<code>this</code>和<code>arguments</code>）。
例子：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>0<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 点击相应节点时，显示对应的序号。可以使用闭包来解决。</span>
<span class="token keyword">var</span> <span class="token function-variable function">add_the_handlers</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> <span class="token function-variable function">helper</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">i</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">alert</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">var</span> i<span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> nodes<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        nodes<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>onclick <span class="token operator">=</span> <span class="token function">helper</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">// 扩展 另外可以用let i = 0，或者把nodes类数组转成数组等方案实现。</span>
<span class="token comment">// 闭包特性：1、函数内再嵌套函数，2、内部函数可以调用外层的参数和变量，3、参数和变量不会被垃圾回收机制回收。</span>
<span class="token comment">// 闭包优点 灵活和方便，便于封装。缺点：空间浪费、内存泄露、性能消耗。</span>
</code></pre></div><p><strong>回调</strong>
发起异步请求，提供一个当服务器响应到达时随即出发的回调函数。异步函数立即返回，这样客户端就不会被阻塞。
<strong>模块</strong>
我们可以使用函数和闭包来构造模块。模块是一个提供接口却隐藏状态与实现的函数或对象。
举例：给<code>String</code>添加一个<code>deentityify</code>方法。它的任务是寻找字符串中的<code>HTML</code>字符实体并把它们替换成对应的字符。</p> <div class="language-js extra-class"><pre class="language-js"><code>String<span class="token punctuation">.</span><span class="token function">method</span><span class="token punctuation">(</span><span class="token string">'deentityify'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 字符实体表。它映射字符实体的名字到对应的字符。</span>
    <span class="token keyword">var</span> entity <span class="token operator">=</span> <span class="token punctuation">{</span>
        quot<span class="token operator">:</span> <span class="token string">'&quot;'</span><span class="token punctuation">,</span>
        lt<span class="token operator">:</span> <span class="token string">'&lt;'</span><span class="token punctuation">,</span>
        gt<span class="token operator">:</span> <span class="token string">'&gt;'</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token comment">// 返回 deentityify方法</span>
    <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">&amp;([^&amp;;]+);)</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span>
        <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span>b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">var</span> r <span class="token operator">=</span> entity<span class="token punctuation">[</span>b<span class="token punctuation">]</span><span class="token punctuation">;</span>
            <span class="token keyword">return</span> <span class="token keyword">typeof</span> r <span class="token operator">===</span> <span class="token string">'string'</span><span class="token operator">?</span> r <span class="token operator">:</span> a<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>模块模式利用了函数作用域和闭包来创建被绑定对象与私有成员的关联，在上面例子中，只有<code>deentityify</code>方法有权访问字符实体表这个数据对象。
模块模式的一般形式是：一个定义了私有变量和函数的函数；利用闭包创建可以访问私有变量和函数的特权函数；最后返回这个特权函数，或者把它们保存到一个可以访问的地方。
使用模块模式就可以摒弃全局变量的使用。它促进了信息隐藏和其他优秀的设计实践。对于应用程序的封装，或者构造其他单例对象，模块模式非常有效。</p> <blockquote><p>单例译注
模块模式通常结合单例模式使用。<code>JavaScript</code>的单例就是用对象字面量表示法创建的对象，对象的属性值可以是数值或函数，并且属性值在该对象的生命周期中不会发生变化。更多内容参见：<a href="https://en.wikipedia.org/wiki/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F" target="_blank" rel="noopener noreferrer">单例模式<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <p><strong>级联</strong>
有一些方法没有返回值。如果我们让这些方法返回<code>this</code>而不是<code>undefined</code>，就可以启用级联。
在一个级联中，我们可以在单独一条语句中依次调用同一个对象的很多方法。比如<code>jQuery</code>获取元素、操作样式、添加事件、添加动画等。
<strong>柯里化</strong>
柯里化，是把多参数函数转换为一系列单参数函数并进行调用的技术。更多详情可参见：<a href="https://en.wikipedia.org/wiki/%E6%9F%AF%E9%87%8C%E5%8C%96" target="_blank" rel="noopener noreferrer">柯里化<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
函数也是值。柯里化允许我们把函数与传递给它的参数相结合，产生一个新的函数。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> add1 <span class="token operator">=</span> add<span class="token punctuation">.</span><span class="token function">curry</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
document<span class="token punctuation">.</span><span class="token function">writeln</span><span class="token punctuation">(</span><span class="token function">add1</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>JavaScript并没有curry方法，但可以扩展该功能。
arguments不是真正的数组，所以使用了Array.prototype.slice方法。</p> <div class="language-js extra-class"><pre class="language-js"><code>Function<span class="token punctuation">.</span><span class="token function">method</span><span class="token punctuation">(</span><span class="token string">'curry'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> slice <span class="token operator">=</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>slice<span class="token punctuation">,</span>
    args <span class="token operator">=</span> <span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">,</span>
    that <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token function">that</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> args<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>记忆</strong>
函数可以将先前操作的结果记录在某个对象里，从而避免无谓的重复运算。这种优化称作记忆。
比如说，我们想要一个递归函数来计算<code>Fibonacci</code>(斐波那契)数列，它的特点是，前面相邻两项之和等于后一项的值。更多参考：<a href="https://en.wikipedia.org/wiki/%E6%96%90%E6%B3%A2%E9%82%A3%E5%A5%91" target="_blank" rel="noopener noreferrer">斐波那契<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。最前面两个数字是0和1。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">fibonacci</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> n <span class="token operator">&lt;</span> <span class="token number">2</span><span class="token operator">?</span> n <span class="token operator">:</span> <span class="token function">fibonacci</span><span class="token punctuation">(</span>n<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token function">fibonacci</span><span class="token punctuation">(</span>n<span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>这样虽然能完成工作，但它做了很多无谓的工作。
构造一个带有记忆功能的函数：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">memoizer</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">mome<span class="token punctuation">,</span> formula</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> <span class="token function-variable function">recur</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> result <span class="token operator">=</span> meno<span class="token punctuation">[</span>n<span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> result <span class="token operator">!==</span> <span class="token string">'number'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            result <span class="token operator">=</span> <span class="token function">formula</span><span class="token punctuation">(</span>recur<span class="token punctuation">,</span> n<span class="token punctuation">)</span><span class="token punctuation">;</span>
            meno<span class="token punctuation">[</span>n<span class="token punctuation">]</span> <span class="token operator">=</span> result<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span> result<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> recur<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>再用这个<code>memoizer</code>函数来定义<code>fibonacci</code>函数，提供其初始的<code>memo</code>数组和<code>formula</code>函数。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> fibonacci <span class="token operator">=</span> <span class="token function">memoizer</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">recur<span class="token punctuation">,</span> n</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">recur</span><span class="token punctuation">(</span>n<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token function">recur</span> <span class="token punctuation">(</span>n<span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>极大的减少了我们的工作量。例如要产生一个记忆的阶乘函数，只需要提供基本的阶乘公式即可：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> factorial <span class="token operator">=</span> <span class="token function">meoizer</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">recur<span class="token punctuation">,</span> n</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> n <span class="token operator">*</span> <span class="token function">recur</span><span class="token punctuation">(</span>n<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="第5章-继承"><a href="#第5章-继承" class="header-anchor">#</a> 第5章 继承</h2> <p><strong>伪类</strong> <code>JavaScript</code>的原型存在诸多矛盾。它不直接让对象从其他对象继承，反而插入了一个多余的间接层：通过构造器函数产生对象。
<code>Function</code>构造器产生的函数对象会运行类似这样的一些代码：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span>  <span class="token punctuation">{</span>constructor<span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">}</span>
</code></pre></div><p>新函数对象被赋予一个<code>prototype</code>属性，这个<code>prototype</code>对象是存放继承特征的地方。</p> <p>当采用构造器调用模式，即用<code>new</code>前缀去调用一个函数时，函数执行的方式会被修改。如果<code>new</code>运算符是一个方法而不是一个运算符，它可能像这样执行：</p> <div class="language-js extra-class"><pre class="language-js"><code>Function<span class="token punctuation">.</span><span class="token function">method</span><span class="token punctuation">(</span><span class="token string">'new'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">// 创建一个新对象，它继承自构造器函数的原型对象。</span>
    <span class="token keyword">var</span> that <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>prototype<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 调用构造器函数，绑定 -this- 到新对象上。</span>
    <span class="token keyword">var</span> other <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>that<span class="token punctuation">,</span>arguments<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 如果它的返回值不是一个对象，就返回该新对象。</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> other <span class="token operator">===</span> <span class="token string">'object'</span> <span class="token operator">&amp;&amp;</span> other<span class="token punctuation">)</span> <span class="token operator">||</span> that<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre></div><p>所有构造器函数都约定命名成大写字母。一种更好的备选方案就是根本不使用<code>new</code>。
<strong>对象说明符</strong>
就是指传多个参数时，可以直接传递一个对象。
<strong>原型</strong>
可以用<code>Object.create</code>方法构造出更多实例来。
<strong>函数化</strong>
迄今为止，我们所看到的继承模式的一个弱点就是没法保护隐私。对象的所有属性都是可见的。我们无法得到私有变量和私有函数。
幸运的是，我们有一个更好的选择，那就是<strong>应用模块模式</strong>。
我们从构造一个生成对象的函数开始。我们以小写字母开头来命名。
该函数包括以下四个步骤
1、创建一个新对象。
2、有选择地私有实例变量和方法。
3、给这个新对象扩充方法。
4、返回那个新对象。
以下是一个函数化构造器的伪代码模板</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> <span class="token function-variable function">constructor</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">spec<span class="token punctuation">,</span> my</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> that<span class="token punctuation">,</span> 其他的私有实例变量；
    my <span class="token operator">=</span> my <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    把共享的变量和函数添加到my中
    that <span class="token operator">=</span> 一个新对象
    添加给 that 的特权方法
    <span class="token keyword">return</span> that<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>函数化模式有很大的灵活性。它相比伪类模式不仅带来的工作更少，还让我们更好的封装和信息隐藏，以及访问父类方法的能力。
<strong>部件</strong>
我们可以从一套部件中把对象组装出来。</p> <h2 id="第6章-数组"><a href="#第6章-数组" class="header-anchor">#</a> 第6章 数组</h2> <p>数组是一段线性分配的内存，它通过整数计算偏移并访问其中的元素。
数组是一种性能出色的数据结构。不幸的是，<code>JavaScript</code>没有像此类数组一样的数据结构。
<strong>数组字面量</strong>
对象字面量
数组继承了<code>Array.prototype</code>大量有用的方法。而对象字面量是继承自<code>Object.prototype</code>。
数组有<code>length</code>属性，而对象没有。
<strong>长度</strong>
每个数组都有一个<code>length</code>属性。
可以直接设置<code>length</code>的值。设置更大的length不会给数组分配更多的空间，而设小导致所有下标大于等于新length的属性被删除。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr<span class="token punctuation">.</span>length <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span> <span class="token comment">// [1]</span>
</code></pre></div><p>也可以通过<code>length</code>来通过添加值</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr<span class="token punctuation">[</span>arr<span class="token punctuation">.</span>length<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span> <span class="token comment">// [1,2,3,4]</span>
</code></pre></div><p>有时用<code>push</code>方法更方便。
<strong>删除</strong>
由于<code>JavaScript</code>的数组也是对象，所以<code>delete</code>运算符可以用来从数组中移出元素。移除后，长度不变，原位置上变成了<code>undefined</code>。
可以使用<code>Array.prototype.splice</code>方法删除数组。
<strong>枚举</strong>
JS数组就是对象，所以<code>for in</code>语句可以用来遍历数据的所有属性。
<strong>不过</strong>，<code>for in</code>无法保证属性顺序。并且可能从原型链中得到意外的属性。
<code>for</code>循环可以避免以上问题。
<strong>容易混淆的地方</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">typeof</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">&quot;object&quot;</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
<span class="token keyword">typeof</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token operator">===</span> <span class="token string">&quot;object&quot;</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</code></pre></div><p>识别是否是数组。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 方法一、</span>
<span class="token keyword">var</span> <span class="token function-variable function">is_array</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> value <span class="token operator">&amp;&amp;</span> <span class="token keyword">typeof</span> value <span class="token operator">===</span> <span class="token string">'object'</span> <span class="token operator">&amp;&amp;</span> value<span class="token punctuation">.</span>constructor <span class="token operator">===</span> Array<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p>但它在识别从不同窗口（window）或帧（frame）里的构造的数组时会失败。
有一个更好的方式：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 方法二、</span>
<span class="token keyword">var</span> <span class="token function-variable function">is_array</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'[object Array]'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>扩展</strong>：
ES5 提供了Array.isArray()的方法。不过兼容性是IE9+。
要做到兼容，可以用如下方法。MDN上提供的。<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray" target="_blank" rel="noopener noreferrer">MDN Array.isArray<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 方法三、</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>Array<span class="token punctuation">.</span>isArray<span class="token punctuation">)</span><span class="token punctuation">{</span>
  Array<span class="token punctuation">.</span><span class="token function-variable function">isArray</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">arg</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>arg<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'[object Array]'</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">// 方法四</span>
arr <span class="token keyword">instanceof</span> <span class="token class-name">Array</span><span class="token punctuation">;</span>
<span class="token comment">// 方法五</span>
<span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">isPrototypeOf</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 方法六</span>
Object<span class="token punctuation">.</span><span class="token function">getPrototypeOf</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">;</span>
</code></pre></div><p>方法四、<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/instanceof" target="_blank" rel="noopener noreferrer"><strong>instanceof</strong> 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
方法五、<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf" target="_blank" rel="noopener noreferrer"><strong>isPrototypeOf()</strong> 方法用于测试一个对象是否存在于另一个对象的原型链上。<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
方法六、<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/GetPrototypeOf" target="_blank" rel="noopener noreferrer"><strong>Object.getPrototypeOf()</strong> 方法返回指定对象的原型（即, 内部[[Prototype]]属性的值）。<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
小结：除了方法二、三外，面对复杂的环境，其他的都不能准确的判断是否是数组。
<strong>方法</strong> <code>JavaScript</code>提供了一套数组可用的方法，这些方法是被存储在Array.prototype中的函数。
<code>Object.prototype</code>是可以扩充的。
<code>Array.prototype</code>也是可以扩充的。
<code>ES5</code>中提供的<code>Object.create</code>方法。这方法用在数组是没有意义的，因为它产生的是一个对象，而不是一个数组，产生的对象将继承这个数组的值和方法，但它没有<code>length</code>特殊属性。
<strong>指定初始值</strong> <code>JavaScript</code>的数组通常不会预设值。书中写了一个循环来扩展，生成初始值。
<strong>扩展：</strong><code>ES6</code>中提供了<code>fill</code>来填充。比如：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span><span class="token string">'b'</span><span class="token punctuation">,</span><span class="token string">'c'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// [0,0,0]</span>
<span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// [0,0,0]</span>

<span class="token comment">// fill方法还可以接受第二、第三个参数，用于指定填充的起始位置和结束位置（不包含）。</span>
<span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [ ,0, ,]  空位不是undefined。空位没有任何值。ES6则是明确将空位转为undefined。</span>
</code></pre></div><h2 id="第7章-正则表达式"><a href="#第7章-正则表达式" class="header-anchor">#</a> 第7章 正则表达式</h2> <p>正则表达式对字符串中的信息实现查找、替换和提取操作。
可处理正则表达式的方法有<code>regexp.exec</code>、<code>regexp.test</code>、<code>string.match</code>、<code>string.search</code>和<code>string.split</code>。通常来说，正则相较于等效的字符串处理有着显著的性能优势。</p> <p><strong>一个例子</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 正则表达式必须写在一行中</span>
<span class="token keyword">var</span> parse_url <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>
<span class="token keyword">var</span> url <span class="token operator">=</span> <span class="token string">&quot;http://www.ora.com:80/goodparts?q#fragment&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> result <span class="token operator">=</span> parse_url<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// ……</span>
</code></pre></div><p>依次匹配到的是：</p> <div class="language-js extra-class"><pre class="language-js"><code>url<span class="token operator">:</span> <span class="token string">'http://www.ora.com:80/goodparts?q#fragment'</span><span class="token punctuation">,</span>
scheme<span class="token operator">:</span> <span class="token string">'http'</span><span class="token punctuation">,</span>
slash<span class="token operator">:</span> <span class="token string">'//'</span>
host<span class="token operator">:</span> <span class="token string">'www.ora.com'</span>
port<span class="token operator">:</span><span class="token string">'80'</span>
path<span class="token operator">:</span><span class="token string">'goodparts'</span>
query<span class="token operator">:</span> <span class="token string">'q'</span>
hash<span class="token operator">:</span> <span class="token string">'fragment'</span>
</code></pre></div><p>个人扩展：这里推荐 <a href="https://regex101.com/" target="_blank" rel="noopener noreferrer">在线测试正则表达式的网站regex101<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，默认是PHP语言，选择JavaScript语言。
<a href="https://regexper.com/#%5Cd%2B" target="_blank" rel="noopener noreferrer">在线图形化RegExp工具<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec" target="_blank" rel="noopener noreferrer">MDN RegExp.prototype.exec()<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
大概解释下这个正则，
这里的<code>^</code> 起始位置，<code>$</code>结束位置
<code>()</code> 分组捕获 <code>?:</code>不捕获
<code>.</code>表示除换行以外的任意单个字符，对于码点大于<code>0xFFFF</code>的<code>Unicode</code>字符，点(<code>.</code>)不能识别（<code>ES6</code>中加<code>u</code>修饰符才可识别），<code>+</code>表示一个或多个，<code>*</code>表示零个或多个，<code>?</code>表示<code>0</code>个或一个。[]表示或者，里面符合一个即可。
<code>\d</code>表示数字<code>0-9</code>。
不严谨的正则表达式是一个常见的安全漏洞的发源地。在执行某些匹配时，嵌套的正则表达式也能导致极其恶劣的性能问题。因此简单是最好的策略。</p> <p>再看一个 <strong>匹配数字</strong>的例子。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> parse_number <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^-?\d+(?:\.\d*)?(?:e[+\-]?\d+)?$</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">;</span>
parse_number<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
parse_number<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'number'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
parse_number<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'98.6'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
parse_number<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'132.21.86.100'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
parse_number<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'123.45E-67'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
parse_number<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'123.45D-67'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
</code></pre></div><p><strong>结构</strong>
有两个方法来创建一个<code>RegExp</code>对象。优先考虑的是正则表达式字面量，还有一种方式是<code>new RegExp('','g')</code>。
正则表达式标识：<code>g</code>全局(匹配多次，不同的方法对<code>g</code>标识的处理防范各不相同)，<code>i</code>忽略大小写。<code>m</code>多行
<strong>元素</strong> <strong>正则表达式分支</strong> <code>|</code>表示或，也表示分支 比如：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token string">'info'</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">in|int</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span>  <span class="token comment">// 匹配成功，[&quot;in&quot;, index: 0, input: &quot;info&quot;]</span>
</code></pre></div><p><strong>正则表达式序列</strong>
一个正则表达式序列饱和一个或多个正则表达式因子。每一个因子能选择是否跟随一个量词，这个量词决定着这个因子被允许出现的次数，若没指定，这个因子则只匹配一次。
<strong>正则表达式因子</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>\ <span class="token operator">/</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token operator">?</span> <span class="token operator">+</span> <span class="token operator">*</span> <span class="token operator">|</span> <span class="token punctuation">.</span> <span class="token operator">^</span> $
</code></pre></div><p><strong>正则表达式转义</strong> <code>\</code> 表转义 <code>\f</code> 分页 <code>\n</code> 换行 <code>\r</code>回车 <code>\t</code> 制表
<code>\u</code> 允许制定一个 Unicode 字符来表示一个十六进制的常量。
<code>\d</code> 等同于[0-9] \D 取反等同于 <code>[^0-9]</code> <code>\s</code> <code>Unicode</code> 空白符一个不完全子集。 \S 与\s相反
<code>\w</code> <code>[0-9A-Z_a-z]</code> \W 与其相反 <code>[^0-9A-Z_a-z]</code> <code>\b</code> 表示 字边界
<code>\1</code> 表示 分组1所捕获的文本的一个引用，所以它能被再次匹配。
<code>\2</code> 表示 指向分组2的引用，<code>\3</code> 是表示分组3的引用，以此类推。
<strong>正则表达式分组</strong>
捕获型 ()
非捕获型<code>?:</code>
向前正向匹配<code>?=</code>
有一个<code>(?=</code>前缀。它类似于非捕获类型分组，但在这个组匹配后，文本会倒回到它它开始的地方，实际上并不匹配任何东西。也可以理解为匹配位置。
向后负向匹配
有一个<code>(?!</code>前缀。它类似于向前正向匹配分组，但只有当它匹配失败时它才继续向前进行匹配。这不是一个好的特性。
<strong>正则表达式字符集</strong>
正则表达式字符集是一种指定一组字符的便利方式。例如，要匹配一个元音字母，<code>(?:a|e|i|o|u)</code>,可以方便的写成<code>[aeiou]</code>。
类提供另外两个便利：①指定字符范围
所以，一组由<code>32</code>个<code>ASCII</code>的特殊组合，可以写成<code>[!-\/:-@\[-</code>{-~]`
②类的取反
取反</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">[</span><span class="token operator">^</span><span class="token operator">!</span><span class="token operator">-</span>\<span class="token operator">/</span><span class="token operator">:</span><span class="token operator">-</span>@\<span class="token punctuation">[</span><span class="token operator">-</span>`<span class="token punctuation">{</span><span class="token operator">-</span><span class="token operator">~</span><span class="token punctuation">]</span>
</code></pre></div><p><strong>正则表达式字符转义</strong>
字符类内部的转义规则和正则表达式因子的相比稍有不同。下面是在字符类中需要被转义的特殊字符。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">-</span> <span class="token operator">/</span> <span class="token punctuation">[</span> \ <span class="token punctuation">]</span>
</code></pre></div><p><strong>正则表达式量词</strong>
量词后缀决定正则表达式因子应该被匹配的次数。
<code>{3}</code>三次
<code>{3,6}</code> 3、4、5、6次
<code>{3,}</code>3次或更多次
<code>?</code>等同于<code>{0,1}</code>，<code>*</code>等同于<code>{0,}</code>，<code>+</code>等同于<code>{1,}</code>。</p> <h2 id="第8章-方法"><a href="#第8章-方法" class="header-anchor">#</a> 第8章 方法</h2> <h3 id="array"><a href="#array" class="header-anchor">#</a> Array</h3> <p><strong>array.concat(item...)</strong> <code>concat</code> 方法产生一个新数组，它包含一份<code>array</code>的浅复制并把一个或多个参数<code>item</code>附加在其后。如果<code>item</code>是数组，那么每个元素分别被添加。后面有和它功能类似的<code>array.push(item...)</code>方法。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span><span class="token string">'b'</span><span class="token punctuation">,</span><span class="token string">'c'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'x'</span><span class="token punctuation">,</span><span class="token string">'y'</span><span class="token punctuation">,</span><span class="token string">'z'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> c <span class="token operator">=</span> a<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>b<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// c =&gt; ['a','b','c','x','y','z',true]</span>
</code></pre></div><p><strong>扩展：</strong> <code>ES6</code> 有更便捷的扩展运算符<code>...</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span><span class="token string">'b'</span><span class="token punctuation">,</span><span class="token string">'c'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'x'</span><span class="token punctuation">,</span><span class="token string">'y'</span><span class="token punctuation">,</span><span class="token string">'z'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> c <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>a<span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">,</span><span class="token operator">...</span>b<span class="token punctuation">]</span><span class="token punctuation">;</span>   <span class="token comment">// [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;, true, &quot;x&quot;, &quot;y&quot;, &quot;z&quot;]</span>
</code></pre></div><p><strong>array.join(separator)</strong> <code>join</code>方法把一个<code>array</code>构造成一个字符串。
<code>separator</code> 默认值就是逗号<code>','</code>。
如果你想把大量的字符串片段组装成一个字符串，把这些片段放在一个数组中，并用<code>join</code>方法连接起来通常比用<code>+</code>元素运算符连接起来要快。</p> <blockquote><p>译注：对于<code>IE6/7</code>，使用join连接大量字符串效率确实优于加号运算符。但目前主流浏览器，包括<code>IE8</code>以后的版本，都对<code>+</code>元素运算符连接字符串做了优化，性能已经显著高于<code>Array.join()</code>。所以目前大多数情况下，建议首选使用+ 连接字符串。更多参看《高性能网站建设进阶指南》中字符串优化相关章节。</p></blockquote> <p><strong>array.pop()</strong> <code>pop</code>方法移除<code>array</code>中的最后一个元素，并返回这个元素。如果<code>array</code>为空，则返回<code>undefined</code>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span><span class="token string">'b'</span><span class="token punctuation">,</span><span class="token string">'c'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> c <span class="token operator">=</span> a<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// a 是 ['a','b']  c是 'c'</span>
<span class="token comment">// pop 可以像这样实现。</span>
<span class="token comment">// 这里的 Array.method()在第一章例子中已经定义了，并且贯穿全书。其实就是相当于Array.prototype</span>
Array<span class="token punctuation">.</span><span class="token function">method</span><span class="token punctuation">(</span><span class="token string">'pop'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>length<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>array.push(item...)</strong>
与<code>concat</code>不同的是，它会修改array，如果参数<code>item</code>是数组，它会把参数数组作为单个元素整个添加到数组中。并返回这个<code>array</code>的新长度值。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> c <span class="token operator">=</span> a<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>b<span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// a 是 [1,2,3,[4,5,6],true]</span>
<span class="token comment">// c 是 5</span>
</code></pre></div><p><code>push</code>可以像这样实现：</p> <div class="language-js extra-class"><pre class="language-js"><code>Array<span class="token punctuation">.</span><span class="token function">method</span><span class="token punctuation">(</span><span class="token string">'push'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>
  <span class="token keyword">this</span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>length<span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>
  <span class="token function">concat</span><span class="token punctuation">(</span><span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>array.reverse()</strong> <code>reverse</code>反转<code>array</code>元素顺序，并返回<code>array</code>本身。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> a<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// a 和 b都是 [3,2,1]</span>
</code></pre></div><p><strong>array.shift()</strong> <code>shift</code>移除<code>array</code>的第一个元素并返回这个元素。如果<code>array</code>为空，则返回<code>undefined</code>。<code>shift</code>通常比<code>pop</code>慢的多。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> c <span class="token operator">=</span> a<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// a 是[2,3] , c 是1</span>
</code></pre></div><p><code>shift</code>可以这样实现：</p> <div class="language-js extra-class"><pre class="language-js"><code>Array<span class="token punctuation">.</span><span class="token function">method</span><span class="token punctuation">(</span><span class="token string">'shift'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>array.slice(start[, end])</strong> <code>slice</code>是对<code>array</code>中的一段做浅复制。<code>end</code>是可选的。默认是<code>array.length</code>,如果两个参数任何一个是负数，<code>array.length</code>会和相加。如果<code>start</code>大于<code>array.length</code>,获得一个<code>[]</code>,字符串也有<code>Sting.slice</code>这个同名方法。</p> <p><strong>array.sort</strong>
默认不能给一组数字排序。默认把要被排序的元素都视为字符串。
幸运的是，可以使用自己的比较函数替换默认的比较函数。
比较函数应该接受两个参数，并且如果这两个参数相等则返回0，如果第1个参数应该排列在前面，则返回一个负数，如果第二个参数应该排列在前面，则返回一个正数。
<code>sort</code>方法是不稳定的。<code>JavaScript</code>的<code>sort</code>方法的稳定性根据不同浏览器的实现而不一致。
可参见<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" target="_blank" rel="noopener noreferrer">MDN sort<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>array.splice(start, deleteCount,item...)</strong> <code>splice</code>方法从array中移除一个或多个元素，并用新的<code>item</code>替换它们。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// splice 可以像这样实现</span>
Array<span class="token punctuation">.</span><span class="token function">method</span><span class="token punctuation">(</span><span class="token string">'splice'</span><span class="token punctuation">,</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">start<span class="token punctuation">,</span> deleteCount</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> max <span class="token operator">=</span> Math<span class="token punctuation">.</span>max<span class="token punctuation">,</span>
        min <span class="token operator">=</span> Math<span class="token punctuation">.</span>min<span class="token punctuation">,</span>
        delta<span class="token punctuation">,</span>
        element<span class="token punctuation">,</span>
        insertCount <span class="token operator">=</span> <span class="token function">max</span><span class="token punctuation">(</span>arguments<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        k <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span>
        len <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>length<span class="token punctuation">,</span>
        new_len<span class="token punctuation">,</span>
        result <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        shift_count<span class="token punctuation">;</span>
    start <span class="token operator">=</span> start <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>start <span class="token operator">&lt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        start <span class="token operator">+=</span> len<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    start <span class="token operator">=</span> <span class="token function">max</span><span class="token punctuation">(</span><span class="token function">min</span><span class="token punctuation">(</span>start<span class="token punctuation">,</span> len<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    deleteCount <span class="token operator">=</span> <span class="token function">max</span><span class="token punctuation">(</span><span class="token function">min</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> deleteCount <span class="token operator">===</span> <span class="token string">'number'</span> <span class="token operator">?</span> deleteCount <span class="token operator">:</span> len<span class="token punctuation">,</span> len <span class="token operator">-</span> start<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    delta <span class="token operator">=</span> insertCount <span class="token operator">-</span> deleteCount<span class="token punctuation">;</span>
    new_len <span class="token operator">=</span> len <span class="token operator">+</span> delta<span class="token punctuation">;</span>
    <span class="token keyword">while</span> <span class="token punctuation">(</span>k <span class="token operator">&lt;</span> deleteCount<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        element <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">[</span>start <span class="token operator">+</span> k<span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>element <span class="token operator">!==</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            result<span class="token punctuation">[</span>k<span class="token punctuation">]</span> <span class="token operator">=</span> element<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        k <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    shift_count <span class="token operator">=</span> len <span class="token operator">-</span> start <span class="token operator">-</span> deleteCount<span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>delta <span class="token operator">&lt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        k <span class="token operator">=</span> start <span class="token operator">+</span> insertCount<span class="token punctuation">;</span>
        <span class="token keyword">while</span> <span class="token punctuation">(</span>shift_count<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">[</span>k<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">[</span>k <span class="token operator">-</span> delta<span class="token punctuation">]</span><span class="token punctuation">;</span>
            k <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span>
            shift_count <span class="token operator">-=</span> <span class="token number">1</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>length <span class="token operator">=</span> new_len<span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>delta <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        k <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
        <span class="token keyword">while</span> <span class="token punctuation">(</span>shift_count<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">[</span>new_len <span class="token operator">-</span> k<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">[</span>len <span class="token operator">-</span> k<span class="token punctuation">]</span><span class="token punctuation">;</span>
            k <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span>
            shift_count <span class="token operator">-=</span> <span class="token number">1</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>length <span class="token operator">=</span> new_len<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span>k <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> k <span class="token operator">&lt;</span> insertCount<span class="token punctuation">;</span> k <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">[</span>start <span class="token operator">+</span> k<span class="token punctuation">]</span> <span class="token operator">=</span> arguments<span class="token punctuation">[</span>k <span class="token operator">+</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> result<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>array.unshift(item...)</strong> <code>unshift</code> 方法像<code>push</code>方法一样，不过是用于把元素添加到数组的开始部分，返回新<code>array</code>的<code>length</code>。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// unshift 可以像这样实现</span>
Array<span class="token punctuation">.</span><span class="token function">method</span><span class="token punctuation">(</span><span class="token string">'unshift'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span>
    <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="function"><a href="#function" class="header-anchor">#</a> Function</h3> <p><strong>function.apply(thisArg,argArray)</strong> <code>apply</code>方法调用<code>function</code>,传递一个会被绑定到<code>this</code>上的对象和一个可选的数组作为参数。</p> <h3 id="number"><a href="#number" class="header-anchor">#</a> Number</h3> <p><strong>number.toExponential(fractionDigits)</strong> <code>toExponential</code>方法 把这个<code>number</code>转换成一个指数形式的字符串。可选参数控制其小数点后的数字位数。它的值必须在<code>0~20</code>。</p> <p><strong>number.toFixed(fractionDigits)</strong> <code>toFixed</code>方法把这个number转换成一个十进制数形式的字符串。可选参数控制其小数点后的数字位数。它的值必须在0~20。</p> <p><strong>number.toPrecision(precision)</strong> <code>toPrecision</code>方法把这个<code>number</code>转换成一个十进制数形式的字符串。可选参数控制数字的精度。它的值必须在<code>0~21</code>。</p> <p><strong>number.toString(radix)</strong>
把<code>number</code>转换成字符串。可选参数控制基数。它的值必须是<code>2~36</code>。默认的<code>radix</code>是以<code>10</code>为基数的。<code>radix</code>参数最常用的是整数，但是它可以用任意的数字。</p> <h3 id="object"><a href="#object" class="header-anchor">#</a> Object</h3> <p><strong>object.hasOwnProperty(name)</strong>
如果这个<code>object</code>包含名为<code>name</code>的属性，那么返回<code>true</code>。原型链中的同名方法不会被检测。这个方法对<code>name</code>就是<code>“hasOwnProperty”</code>时不起作用。</p> <h3 id="regexp"><a href="#regexp" class="header-anchor">#</a> RegExp</h3> <p><strong>regexp.exec(string)</strong> <code>exec</code>是正则中最强大(和最慢）的方法。
如果成功匹配，它会返回一个数组。下标为0 的元素包含正则匹配的子字符串。下标为1的则是分组1捕获的文本。下标为2的则是分组2捕获的文本。以此类推。如果匹配失败则返回<code>null</code>。
<strong>regexp.test(string)</strong> <code>test</code>是最简单(和最快)的方法。匹配成功，返回<code>true</code>,否则返回<code>false</code>。不要对这个方法使用<code>g</code>标识。
比如：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\w+</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">;</span>
reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'ab'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
<span class="token comment">// 再执行一遍就是false了。</span>
reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'ab'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
<span class="token comment">// 再执行一遍就是true了。</span>
reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'ab'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
<span class="token comment">// 再执行一遍又是false了，如此反复，所以用g标识后，看起来很诡异。因为每次匹配开始位置变了。</span>
reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'ab'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
</code></pre></div><p><code>test</code>可以像这样实现：</p> <div class="language-js extra-class"><pre class="language-js"><code>RegExp<span class="token punctuation">.</span><span class="token function">method</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">string</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>string<span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="string"><a href="#string" class="header-anchor">#</a> String</h3> <p><strong>string.charAt(pos)</strong>
返回在<code>string</code>中的<code>pos</code>位置处的字符。</p> <p><strong>string.charCodeAt(pos)</strong>
与<code>charAt</code>一样，不过返回整数形式表示字符码位。</p> <p><strong>string.concat(string)</strong>
很少用，用<code>+</code>号运算符更方便。</p> <p><strong>string.indexOf(searchString,position)</strong>
在<code>string</code>中查找第一个参数，如果被找到返回该字符的位置，否则返回<code>-1</code>。<code>position</code>可设置指定位置开始查找。</p> <p><strong>string.lastIndexOf(searchString,position)</strong> <code>lastIndexOf</code> 方法和<code>indexOf</code>方法类似，不过它是从末尾开始查找，不是从头开始。</p> <p><strong>string.localeCompare(that)</strong>
比较两个字符串。类似于<code>array.sort</code>。</p> <p><strong>string.match(regexp)</strong>
如果没有<code>g</code>标识，那么调用<code>string.match(regexp)</code>和调用<code>regexp.exec(string)</code>结果相同。如果带有<code>g</code>标识，那么它生成一个包含所有匹配（除捕获分组之外）的数组。</p> <p><strong>string.replace(searchValue,replaceValue)</strong>
对<code>string</code>进行查找和替换操作，并返回一个新的字符串。参数<code>searchvalue</code>可以是一个字符串也可以是一个正则表达式对象。参数<code>replaceValue</code>可以是一个字符串或一个函数。</p> <p><strong>string.search(regexp)</strong>
和<code>indexOf</code>类似，不过它接收正则为参数。</p> <p><strong>string.slice(start, end)</strong> <code>slice</code>方法复制<code>string</code>的一部分来构造一个新的字符串。如果<code>start</code>参数是负数，它将与<code>string.length</code>相加。<code>end</code>参数是可选的。</p> <p><strong>string.split(separator,limit)</strong>
把<code>string</code>分割成片段来创建一个字符串数组。可选参数<code>limit</code>可以限制分割的片段数量。<code>separator</code>参数可以是字符串或者正则。</p> <p><strong>string.substring(start,end)</strong>
与<code>slice</code>方法一样，不过它不能处理负数参数。</p> <p><strong>string.toLocaleLowerCase()</strong>
它使用本地化的规则把这个<code>string</code>中的字母转换成小写格式。这个方法主要用在土耳其语上。</p> <p><strong>string.toLocaleUpperCase()</strong>
它使用本地化的规则把这个<code>string</code>中的字母转换成大写格式。这个方法主要用在土耳其语上。</p> <p><strong>string.toLowerCase()</strong>
返回新字符串，所有字母转成小写格式。</p> <p><strong>string.toUpperCase()</strong>
返回新字符串，所有字母转成大写格式。</p> <p><strong>String.fromCharCode(char...)</strong>
根据一串数字编码返回一个字符串。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> String<span class="token punctuation">.</span><span class="token function">fromCharCode</span><span class="token punctuation">(</span><span class="token number">67</span><span class="token punctuation">,</span><span class="token number">97</span><span class="token punctuation">,</span><span class="token number">116</span><span class="token punctuation">)</span> <span class="token comment">// a是'Cat'</span>
</code></pre></div><h2 id="第9章-代码风格"><a href="#第9章-代码风格" class="header-anchor">#</a> 第9章 代码风格</h2> <p>这一章中，简短的说了一些代码风格。事实证明代码风格在编程中是很重要的。</p> <h2 id="第10章-优美的特性"><a href="#第10章-优美的特性" class="header-anchor">#</a> 第10章 优美的特性</h2> <p>精简的<code>JavaScript</code>里都是好东西。
包括：1、函数是顶级对象；2、基于原型继承的动态作用域；3、对象字面量和数组字面量。</p> <p>到此，读书笔记已完结。文章有什么不妥之处，欢迎指出~</p> <h2 id="关于"><a href="#关于" class="header-anchor">#</a> 关于</h2> <p>作者：常以<strong>若川</strong>为名混迹于江湖。前端路上 | PPT爱好者 | 所知甚少，唯善学。<br> <a href="https://lxchuan12.github.io/" target="_blank" rel="noopener noreferrer">个人博客<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a><br> <a href="https://juejin.im/user/1415826704971918/posts" target="_blank" rel="noopener noreferrer">掘金专栏<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，欢迎关注~<br> <a href="https://segmentfault.com/blog/lxchuan12" target="_blank" rel="noopener noreferrer"><code>segmentfault</code>前端视野专栏<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，开通了<strong>前端视野</strong>专栏，欢迎关注~<br> <a href="https://zhuanlan.zhihu.com/lxchuan12" target="_blank" rel="noopener noreferrer">知乎前端视野专栏<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，开通了<strong>前端视野</strong>专栏，欢迎关注~<br> <a href="https://github.com/lxchuan12/blog" target="_blank" rel="noopener noreferrer">github blog<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，相关源码和资源都放在这里，求个<code>star</code>^_^~</p> <h2 id="微信公众号-若川视野"><a href="#微信公众号-若川视野" class="header-anchor">#</a> 微信公众号  若川视野</h2> <p>可能比较有趣的微信公众号，长按扫码关注。也可以加微信 <code>ruochuan12</code>，注明来源，拉您进【前端视野交流群】。</p> <p><img src="/assets/img/wechat-official-accounts-mini.d9491f62.png" alt="若川视野"></p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后更新时间:</span> <span class="time">4/4/2021, 3:33:55 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/js-object-api/" class="prev">
        JavaScript 对象所有API解析【2020版】
      </a></span> <span class="next"><a href="/goal/">
        如何制定有价值的目标
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><BackToTop></BackToTop><!----></div></div>
    <script src="/assets/js/app.9fbcafa6.js" defer></script><script src="/assets/js/2.33539d56.js" defer></script><script src="/assets/js/35.35a86a7c.js" defer></script><script src="/assets/js/23.72249401.js" defer></script>
  </body>
</html>
